<template>
	<view class="container">
		<!-- <view class="header">
			<view class="left" @click="toBack"><i class="ico"></i></view>
			<view class="right" @click="open"><i class="ico"></i></view>
		</view> -->
		<view class="u-demo-block">
			<u-swiper :list="list3" indicator indicatorMode="dot" :autoplay="true" height="500rpx"></u-swiper>
		</view>
		<view class="info">
			<view class="head">{{activeList.activeName}}</view>
			<view class="grid">
				<u-grid :border="true" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
						<text class="grid-text">{{listItem.name}}</text>
						<text class="grid-text1">{{listItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="detail">
				<text>时间：{{time}}</text>
				<text>地点：{{activeList.location}}</text>
			</view>
			<view class="tabs">
				<u-tabs :list="list2" lineColor="#F3588C" lineWidth="7px" lineHeight="5px"
					@click="swiperChange"></u-tabs>
			</view>
			<swiper class="swiperBox" style="height: 600upx;" :current="currentSwiperIndex" duration="50">
				<swiper-item class="swiper-item">
					<view class="intro">
						{{activeList.details}}
					</view>
				</swiper-item>
				<swiper-item class="swiper-item1">
					<view class="vipInfo" v-for="(item,index) in r" :key="index">
						<image :src="item.avatarUrl"></image>
						<text>{{item.username}}</text>
						<view class="vipSign">已签到</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item2">
					<view class="comment">
						<u--textarea class="textarea" placeholder="我想说两句...请文明发言" height="50px"></u--textarea>
						<u-button class="custom-style" text="提交评论"></u-button>
					</view>
				</swiper-item>
			</swiper>
			<view class="footer">
				<view class="footer-head"><text>活动咨询</text></view>
				<view class="footer-content">
					<text>遇到问题？请联系客服帮忙</text>
					<text>
						<image src="../../static/phone1.png"></image>{{activeList.phone}}
					</text>
					<text>
						<image src="../../static/mobile.png"></image>{{activeList.mobilePhone}}
					</text>
				</view>
				<view class="qrcode">
					<image src="../../static/qrcode.jpg">扫码加客服微信</image>
				</view>
			</view>
			<view class="btn_region">
				<view class="item">
					<image src="../../static/comment.png"></image>
					<view class="text">评论</view>
				</view>
				<view class="item">
					<image src="../../static/phone.png"></image>
					<view class="text">咨询</view>
				</view>
				<view class="item">
					<image src="../../static/share.png"></image>
					<view class="text">分享</view>
				</view>
				<view class="myBtn" :style="{'background-color':bgColor}" @click="apply">
					<view class="ico">{{activeList.activeStatus}}</view>
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop" :top="20">
				<view id="btmTopBtn" @click="backTop">
					<i class="ico"></i>
					顶部
				</view>
			</u-back-top>
		</view>
	</view>
</template>

<script>
	import backtop from '../../uni_modules/uview-ui/libs/config/props/backtop';
	export default {
		data() {
			return {
				title: 'Hello',
				currentSwiperIndex: 0,
				scrollTop: 0,
				time: '',
				id: '',
				r:[],
				newarr2:[],
				activeList: {},
				vipInfo: [],
				activeStatus: '',
				statusCode: false,
				bgColor: '',
				list3: [],
				list: [{
						name: '100人',
						title: '邀请男生'
					},
					{
						name: '100人',
						title: '邀请女生'
					},
					{
						name: '200元',
						title: '男生费用'
					},
					{
						name: '100元',
						title: '女生费用'
					},
				],
				list2: [{
					name: '活动介绍'
				}, {
					name: '现场签到',
				}, {
					name: '评论',
					badge: {
						value: 5,
					}
				}]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			this.activeList = this.$store.state.active
			console.log(this.activeList);
			this.getAcivity()
			this.getVipInfo()
		},
		methods: {
			swiperChange(item) {
				this.currentSwiperIndex = item.index
			},
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			async getAcivity() {
				let activeList = this.activeList
				this.list3.push(activeList.imgUrl)
				// console.log(activeList.manNumber);
				this.list[0].name = activeList.manNumber + '人'
				this.list[1].name = activeList.womanNumber + '人'
				this.list[2].name = activeList.manMoney + '元'
				this.list[3].name = activeList.womanMoney + '元'
				
				let activeStatus = this.activeStatus
				
				this.colorChange()
				
			},
			colorChange() {
				if (this.statusCode) {
					this.bgColor = 'gray'
				} else {
					this.bgColor = '#ff589b'
				}
			},
			async getVipInfo() {
				let id = this.activeList.id
				let res = await this.request({
					url: '/active/userInfo/' + id,
					method: 'POST'
				})
				console.log(res.data)
				this.uniqueArray(res.data)
				console.log(this.r);
			},
			uniqueArray(array) {
			      var r = [];
			      for (var i = 0, l = array.length; i < l; i++) {
			        for (var j = i + 1; j < l; j++)
			          if (array[i]['id'] === array[j]['id'])
			            j = ++i;
			            r.push(array[i]);
			      }
			
			      var newarr2 = new Array(r.length);
			      for (var t = 0; t < newarr2.length; t++) {
			        newarr2[t] = 0;
			      }
			      for (var p = 0; p < r.length; p++) {
			        for (var j = 0; j < array.length; j++) {
			          if (r[p]['id'] == array[j]['id']) {
			          //根据agent id来进行对比去重
			            newarr2[p]++;
			          }
			        }
			      }
			      this.r=r;
			      this.newarr2=newarr2;
			},
			async apply() {
				if (this.activeList.statusCode) {
					let id = this.activeList.id
					let token = uni.getStorageSync('token')
					console.log(token);
					
					let resdata = await this.request({
						url:'/active/userInfo/'+id,
						method:'POST'
					})
					let id1 = uni.getStorageSync('id')
					console.log(resdata.data);
					console.log(id1);
					let state = resdata.data.filter((item) => {
						return item.id == Number(id1)
					})
					if(!state){
						uni.showToast({
							title:'您已报名,请勿多次点击',
							icon:'none'
						})
					}else {
						let res = await this.request({
							url: '/active/enrollment/' + id,
							header: {
								token
							},
							method: 'POST'
						})
						if (res.code == "200") {
							uni.showToast({
								title: '报名成功'
							})
							this.getVipInfo()
						}
					}
				} else {
					uni.showToast({
						title: '活动已结束',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 100rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background-image: url('../../static/my_bg.png');
		background-color: #ff589b;
		color: #fff;
		font-size: 44rpx;
		background-size: 100%;
		position: relative;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.u-demo-block {
		width: 100%;
		height: 500rpx;
	}

	.info {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
		border-radius: 10upx;
		background-color: white;
		top: -15upx;
	}

	.head {
		font-size: 35upx;
		margin-top: 30upx;
		padding-left: 80upx;
		margin-bottom: 15upx;
	}

	.grid {
		width: 80%;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		margin-top: 30upx;
	}

	.grid-text {
		font-size: 35rpx;

	}

	.grid-text1 {
		font-size: 10rpx;
		color: #050506;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.detail {
		display: flex;
		flex-direction: column;
		width: 80%;
		border-radius: 7upx;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		box-shadow: 0upx 0upx 0upx 0.2upx #e9e9e9;
		margin: auto;
		margin-top: 40upx;
		padding-left: 25upx;
		padding-top: 15upx;

		text {
			padding-bottom: 15rpx;
		}
	}

	.tabs {
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		margin-top: 20upx;
	}

	.vipInfo {
		position: relative;
		display: flex;
		// flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 70rpx;
		font-size: 24rpx;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		text {
			width: 400rpx;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
		}

		.vipSign {
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			// margin-left: 340rpx;
			color: #FFFFFF;
			background-color: #ff589b;
			margin-right: 70rpx;
		}
	}

	.textarea {
		width: 80%;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		margin-top: 40upx;
	}

	.custom-style {
		background-color: #F3588C;
		color: white;
		width: 80%;
		margin-top: 30upx;
	}

	.intro {
		margin-top: 20upx;
		margin-left: 70upx;
		font-size: 24upx;
	}

	.footer {
		display: flex;
		flex-direction: column;
	}

	.footer-head {
		position: relative;
		width: 80%;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		border-top: 1px solid gray;
		text-align: center;

		text {
			position: absolute;
			background: #FFFFFF;
			top: -18rpx;
			left: 225rpx;
			width: 150rpx;
			font-size: 14upx;
			color: gray;
		}
	}

	.footer-content {
		display: flex;
		flex-direction: column;
		font-size: 28upx;
		margin-left: 70upx;
		margin-top: 70upx;
		margin-bottom: 20rpx;

		text {
			margin-bottom: 10upx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.qrcode {
		margin-bottom: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: gray;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.btn_region {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 9;

		.item {
			display: flex;
			flex-flow: column;
			align-items: center;

			image {
				color: #ff589b;
				width: 30rpx;
				height: 30rpx;
			}

			.text {
				margin-top: 10upx;
				font-size: 24rpx;
			}
		}

		.myBtn {
			display: flex;
			align-items: center;
			color: #fff;
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			justify-content: center;
			// border-radius: 40rpx;
			background-color: #ff589b;
		}
	}

	#btmTopBtn {
		color: #ff589b;
		width: 88rpx;
		height: 82rpx;
		border-radius: 50%;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
		background-color: #fff;

		.ico {
			font-size: 42rpx;
		}
	}
</style>